<template>
	<view class="content">
		<!-- 留言咨询 -->
		<u-form :model="formData" ref="uForm" label-align="center" :label-style="labelStyle" :error-type="errorType"
			label-width=180>
			<u-form-item prop="content" label="咨询内容" class="form-item-top" label-align="left" label-position="top">
				<u-input type="textarea" confirmType="done" height="200" placeholder="请输入咨询内容"
					v-model="formData.content" maxlength="2048" trim :custom-style="styles"
					:placeholderStyle="placeholderStyle" />
			</u-form-item>
		</u-form>
		<u-button class="bottom" type="primary" :disabled="disabled" :loading="loading" @click="submit">提交留言</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			let formData = {
				content: '',
			}
			return {
				disabled: false,
				loading: false,

				formData, // 咨询

				rules: {
					"content": [{
						required: true,
						message: '请输入咨询内容',
						trigger: 'blur',
					}, {
						min: 50,
						message: '咨询内容至少输入50字',
						trigger: ['blur', 'change'],
					}],
				},
				placeholderStyle: this.$css.placeholderStyle,
				styles: this.$css.styles,
				errorType: this.$css.errorType,
				labelStyle: this.$css.labelStyle,
			}
		},
		onLoad(options) {
			this.initPage(options);
		},
		onReady() {
			if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			initPage(options) {

			},
			submit() {
				this.disabled = true;
				this.loading = true;

				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.submitForm();
					} else {
						this.disabled = false;
						this.loading = false;
					}
				})
			},
			// 提交申报
			submitForm() {
				vk.callFunction({
						url: this.$api.AddFeedback,
						loading: true,
						data: this.formData
					})
					.then(res => {
						console.log('提交成功 res', res);
						vk.toast('提交成功。', () => {
							vk.navigateToHome();
						});
					})
			},

		}
	}
</script>